<template>
    <div class="allGoodsContainer">
        <ul class="allGoods">
            <li v-for="(user,index) in users" :key="index">
                <div class="allGoodsContent" v-if="user.status==1">
                    <div class="allGood">
                        <div class="orderInfo">
                            <div class="userInfo">
                                <p class="userName">收件人：{{ user.consignee }}</p>
                                <p class="phone">联系电话：{{ user.phone }}</p>
                            </div>
                            <p class="orderStatus" v-if="user.status==1" :style="{color:'rgb(251, 72, 102)'}">待付款</p>
                            <p class="orderStatus" v-if="user.status==2" :style="{color:'rgb(251, 72, 102)'}">待配送</p>
                            <p class="orderStatus" v-if="user.status==3" :style="{color:'rgb(86, 155, 233)'}">派送中</p>
                            <p class="orderStatus" v-if="user.status==4" :style="{color:'rgb(86, 155, 233)'}">已完成</p>
                            <p class="orderStatus" v-if="user.status==5" :style="{color:'rgb(255, 165, 74)'}">已取消</p>
                        </div>
                        <div class="order">
                            <div class="info">
                                <p class="address">收货地址：{{ user.address }}</p>
                                <p class="buyTime">购买时间：{{user.checkoutTime}}</p>
                                <p class="orderNum">订单号：<span>{{ user.number }}</span></p>
                                <p class="method">支付方式：
                                    <span class="methodContent" v-if="user.payMethod==2" :style="{color:'rgb(9,209,22)'}">微信</span> 
                                    <span class="methodContent" v-if="user.payMethod==1" :style="{color:'rgb(2,169,241)'}">支付宝</span> 
                                    <span class="payStatusContainer">&nbsp;支付状态：
                                        <span class="payStatus" v-if="user.payStatus==2">退款</span>
                                        <span class="payStatus" v-if="user.payStatus==1">已付款</span>
                                        <span class="payStatus" v-if="user.payStatus==0">未付款</span>
                                    </span>
                                </p>
                            </div>
                            <p class="detail">订单详情</p>
                        </div>
                        <div class="goodInfo">
                            <div class="buy">
                                <p class="price">合计：￥<span>{{ user.amount }}</span></p>
                            </div>
                            <div class="moreInfo">
                                <div class="cancel">
                                    <span v-if="user.status==1||user.status==2||user.status==3" @click="cancelOrder(user.id,index)">取消订单</span>
                                    <span v-if="user.status==5||user.status==4">删除订单</span>
                                </div>
                                <div class="goPay" v-if="user.status!=2&&user.status!=5">
                                    <span v-if="user.status==1">去支付</span>
                                    <span v-if="user.status==4||user.status==3">确认收货</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'allGoodsContent',
        data(){
            return{
                goods:[
                    {id:0,store:'旗舰店',situation:'待付款',loc:'',time:'',everyGood:[{id:0,everyPrice:33.3},{id:1,everyPrice:66.6}],info:'',name:'',num:'',price:''},
                    {id:1,store:'生鲜超市',situation:'待发货',loc:'',time:'',everyGood:'',info:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',name:'蓝莓',num:'3斤',price:38.8},
                    {id:2,store:'生活用品超市',situation:'待收货',loc:'已发往成都市邮件中心，下一站',time:'2023.12.28 10:31',everyGood:'',info:'卫生巾 女性生理期卫生用品 卫生巾特惠',name:'卫生巾',num:'10包',price:68.8},
                    {id:3,store:'生鲜超市',situation:'待评价',loc:'',time:'',everyGood:'',info:'坚果 巴旦木核桃 优质脂肪 每日坚果',name:'坚果混合',num:'2斤',price:38.8},
                ],
                users:[]
            }
        },
        methods:{
            cancelOrder(id,index){
                axios({
                    url:`http://localhost:8080/polycystic/order/cancel/${id}`,
                    method:'put',
                    headers:{
                        token:localStorage.getItem('jwt')
                    }
                }).then(res=>{
                    console.log(res.data);
                })
                this.$set(this.users,index,this.users[index])
            }
        },
        mounted(){
            axios({
                url:'http://localhost:8080/polycystic/order/historyOrder',
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.users=res.data.data
            })
        },
        computed:{
            goodPrice(){
                let price=0
                return (id)=>{
                    for(let i=0;i<this.goods.length;i++){
                        if(id===this.goods[i].id){
                            for(let j=0;j<this.goods[i].everyGood.length;j++){
                                price+=this.goods[i].everyGood[j].everyPrice
                            }
                        }
                    }
                    return price.toFixed(1)
                }
            },
            situationColor(){
                return (id)=>{
                    for(let i=0;i<this.goods.length;i++){
                        if(id===this.goods[i].id){
                            if(this.goods[i].situation==='待付款'){
                                return {'color':'rgb(251, 72, 102)'}
                            }
                            else if(this.goods[i].situation==='待发货'||this.goods[i].situation==='待收货'){
                                return {'color':'rgb(86, 155, 233)'}
                            }
                            else if(this.goods[i].situation==='待评价'){
                                return {'color':'rgb(255, 165, 74)'}
                            }
                        }
                    }
                }
            }
        },
    }
</script>

<style scoped>
    .allGoodsContainer{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .6rem;
    }
    .allGoods{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .allGoodsContent{
        width:6.86rem;
        margin-bottom: .2rem;
        border-radius: .3rem;
        background-color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .allGood{
        width: 94%;
        display: flex;
        flex-direction: column;
        align-content: center;
        margin-top: .3rem;
        margin-bottom: .3rem;
    }
    .allGood>div{
        width: 100%;
    }
    .orderInfo{
        display: flex;
        justify-content: space-between;
        font-family: 'PingFangSC-Regular';
    }
    .orderInfo .orderStatus{
        font-family: 'PingFangSC-Mediuem';
    }
    .order{
        margin-top: .3rem;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    .order .info{
        display: flex;
        flex-direction: column;
    }
    .order .info .orderNum >span{
        color:#999999;
    }
    .detail{
        font-size: .24rem;
        color:rgb(86, 155, 233);
        width: 1.2rem;
    }
    .goodInfo{
        margin-top: .3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .goodInfo .buy{
        display: flex;
        align-items: flex-end;
    }
    .goodInfo .buy .number{
        color:#999999;
        font-family: 'PingFangSC-Regular';
        font-size: .22rem;
    }
    .goodInfo .buy .price{
        font-size: .22rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .goodInfo .buy .price span{
        font-size: .32rem;
    }
    .moreInfo{
        display: flex;
        align-items: center;
    }
    .moreInfo>div{
        width: 1.6rem;
        height: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        border-radius: .5rem;
    }
    .moreInfo .cancel{
        color:#333333;
        border: 1px solid #333333;
    }
    .moreInfo .goPay{
        border: 1px solid rgb(251, 72, 102);
        color:rgb(251, 72, 102);
        margin-left: .2rem;
    }
</style>